<script setup lang="ts">
import { ref } from 'vue'
const ImgSrc=ref('https://img1.baidu.com/it/u=1968668429,2104382916&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1727024400&t=d983398444bb3cb0c1dffd04c75dcf3d')
 const  ImgTitle=ref('ikun')

const  changeImg=()=>{
  
  ImgSrc.value='https://img0.baidu.com/it/u=2589248582,3962932903&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1727024400&t=9b06eb14aa8b7ef3de18ad40b5f3af38'
  ImgTitle.value='geigei'

}

//类的绑定
const isRed=ref(true)

</script>


<template>
<img :src="ImgSrc" :title="ImgTitle" alt="">


  <button @click="changeImg">点击切换照片</button>
  //绑定class的时候,可以有以下的写法

  <div @click="isRed = !isRed" class="box" :class="{ red: isRed, border: true }"></div>
</template>

<style>
img {
  width: 200px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px red solid;
}
.red {
  background-color: red;
}
.border {
  border: 10px orange solid;
}
</style>
